<template>
  <view class="user-center-page">
    <!-- 顶部导航栏 -->


    <!-- 个人信息头部 -->
    <view class="user-header" >
      <view class="header-bg" :style="{ backgroundImage: 'url(https://picsum.photos/id/1015/1200/300)' }">
        <view class="bg-overlay"></view>
      </view>
       <view style="position: absolute; right: 25rpx; top: 60rpx; font-size: 45rpx;" @click="gotoSettings">
		  <text class="icon">⚙️</text>
		</view>
      <view class="user-info-wrapper">
        <view class="avatar-section">
          <image 
            :src="userInfo.avatarUrl" 
            mode="widthFix" 
            class="user-avatar"
            @click="chooseAvatar"
          ></image>
          <view class="user-level" :style="{ backgroundColor: userLevel.color }">
            {{ userLevel.name }}
          </view>
        </view>
        
        <view class="user-detail">
          <view class="user-name-row">
            <text class="user-name">{{ userInfo.nickname || '未设置昵称' }}</text>
            <text class="edit-icon" @click="editUserInfo">✎</text>
          </view>
          
          <view class="user-id" >ID: {{ userInfo.userId }}</view>
          
          <view class="user-stats">
            <view class="stat-item" @click="gotoOrderList('completed')">
              <view class="stat-value" >{{ userStats.completedOrders }}</view>
              <view class="stat-label">已完成</view>
            </view>
            <view class="stat-item" >
              <view class="stat-value" >{{ userStats.rating.toFixed(1) }}</view>
              <view class="stat-label">评分</view>
            </view>
            <view class="stat-item">
              <view class="stat-value" >{{ userStats.reputation }}</view>
              <view class="stat-label" >信誉分</view>
            </view>
          </view>
        </view>
        
        <!-- 接单状态切换 -->
        <view class="online-status" >
         
          <view class="status-toggle" >
            <u-switch 
              v-model="isOnline" 
              @change="handleOnlineStatusChange"
			  active-color="#00ff00"
            ></u-switch>
			
          </view>
		  <view class="status-text">
		    {{ isOnline ? '接单中' : '已停止' }}
		  </view>
        </view>
      </view>
    </view>

    <!-- 核心功能区 -->
    <view class="core-functions">
      <!-- 余额与提现 -->
      <view class="balance-card" @click.native.stop="balance">
        <view class="card-title">我的余额</view>
        
        <view class="balance-amount">
          <text class="currency">¥</text>
          <text class="amount">{{ userBalance.available.toFixed(2) }}</text>
          <text class="frozen-amount"> 冻结: ¥{{ userBalance.frozen.toFixed(2) }}</text>
        </view>
        
        <view class="balance-actions">
          <button class="action-btn recharge-btn" @click.native.stop="gotoRecharge">
            充值
          </button>
          <button 
            class="action-btn withdraw-btn" 
            @click.native.stop="gotoWithdraw"
            :disabled="userBalance.available <= 0"
          >
            提现
          </button>
        </view>
      </view>
      
      <!-- 开通会员卡片 -->
      <view class="member-card" @click="gotoMemberCenter">
        <view class="member-icon">🎁</view>
        <view class="member-info">
          <view class="member-title">
            开通会员享特权
            <view class="member-tag">提现费率低至0.5%</view>
          </view>
          <view class="member-benefits">
            <text>优先接单</text>
            <text>专属客服</text>
            <text>会员活动</text>
          </view>
        </view>
        <view class="arrow-icon">→</view>
      </view>
      
      <!-- 商业合作卡片 -->
      <view class="business-cards">
        <view class="business-card" @click="gotoMerchantEntry">
          <view class="card-icon">🏪</view>
          <view class="card-content">
            <view class="card-title">商家入驻</view>
            <view class="card-desc">成为认证商家，承接更多订单</view>
          </view>
        </view>
        
        <view class="business-card" @click="gotoEnterpriseRecruit">
          <view class="card-icon">🏢</view>
          <view class="card-content">
            <view class="card-title">企业入职</view>
            <view class="card-desc">加入合作企业，成为专业飞手</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单中心 -->
    <view class="order-center">
      <view class="section-header">
        <text class="section-title">订单中心</text>
        <text class="section-more" @click="gotoOrderList('all')">
          查看全部 <text class="arrow">→</text>
        </text>
      </view>
      
      <view class="order-types">
        <view class="order-type" @click="gotoOrderList('pending')">
          <view class="type-icon">⏳</view>
          <view class="type-name">待处理</view>
          <view class="type-badge" v-if="orderCounts.pending > 0">
            {{ orderCounts.pending }}
          </view>
        </view>
        
        <view class="order-type" @click="gotoOrderList('processing')">
          <view class="type-icon">🚚</view>
          <view class="type-name">进行中</view>
          <view class="type-badge" v-if="orderCounts.processing > 0">
            {{ orderCounts.processing }}
          </view>
        </view>
        
        <view class="order-type" @click="gotoOrderList('completed')">
          <view class="type-icon">✓</view>
          <view class="type-name">已完成</view>
        </view>
        
        <view class="order-type" @click="gotoOrderList('cancelled')">
          <view class="type-icon">✕</view>
          <view class="type-name">已取消</view>
        </view>
        
        <view class="order-type" @click="gotoAcceptRecord">
          <view class="type-icon">📝</view>
          <view class="type-name">接单记录</view>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-group">
        <view class="function-item" @click="gotoAddressManage">
          <view class="item-icon">📍</view>
          <view class="item-name">地址管理</view>
          <view class="item-arrow">→</view>
        </view>
        
        <view class="function-item" @click="gotoLearningRecords">
          <view class="item-icon">📚</view>
          <view class="item-name">学习记录</view>
          <view class="item-arrow">→</view>
        </view>
        
        <view class="function-item" @click="gotoCoupons">
          <view class="item-icon">🎫</view>
          <view class="item-name">我的优惠券</view>
          <view class="item-badge" v-if="couponCount > 0">
            {{ couponCount }}
          </view>
          <view class="item-arrow">→</view>
        </view>
      </view>
      
      <view class="function-group">
        <view class="function-item" @click="showAboutDialog">
          <view class="item-icon">📞</view>
          <view class="item-name">联系客服</view>
          <view class="item-arrow">→</view>
        </view>
        
        <view class="function-item" @click="gotoFeedback">
          <view class="item-icon">💬</view>
          <view class="item-name">问题反馈</view>
          <view class="item-arrow">→</view>
        </view>
        
        <view class="function-item" @click="contactCustomerService">
          <view class="item-icon">ℹ️</view>
          <view class="item-name">关于我们</view>
          <view class="item-arrow">→</view>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @click="showLogoutConfirm">
        退出登录
      </button>
    </view>

    <!-- 确认弹窗 -->
    <u-popup 
      :show="confirmPopup" 
      mode="center" 
	  round="20"
	  @close="confirmPopup = false"
      :mask-click="false"
    >
      <view class="confirm-dialog">
        <view class="dialog-title">{{ dialog.title }}</view>
        <view class="dialog-content">{{ dialog.content }}</view>
        <view class="dialog-buttons">
          <button 
            class="dialog-btn cancel-btn" 
            @click="closeDialog"
          >
            {{ dialog.cancelText || '取消' }}
          </button>
          <button 
            class="dialog-btn confirm-btn" 
            @click="confirmDialogAction"
          >
            {{ dialog.confirmText || '确认' }}
          </button>
        </view>
      </view>
    </u-popup>
	<helang-tabBar></helang-tabBar>
  </view>
</template>

<script>
import helangTabBar from '@/components/helang-tabBar/helang-tabBar.vue'
export default {
  components:{
	  helangTabBar
  },
  data() {
    return {
      // 本地用户信息数据
      userInfo: {
        avatarUrl: 'https://picsum.photos/id/1005/200/200',
        nickname: '航拍达人小李',
        userId: 'DR20230518007'
      },
      
      // 本地用户余额数据
      userBalance: {
        available: 8752.50,
        frozen: 1247.50
      },
      confirmPopup:false,
      // 本地用户统计数据
      userStats: {
        completedOrders: 42,
        rating: 4.9,
        reputation: 98
      },
      
      // 本地用户等级数据 - 调整为金色调，更显高端
      userLevel: {
        name: '钻石飞手',
        color: '#D4AF37' // 金色
      },
      
      // 接单状态
      isOnline: true,
      
      // 优惠券数量
      couponCount: 3,
      
      // 订单数量统计
      orderCounts: {
        pending: 2,
        processing: 1,
        completed: 42,
        cancelled: 3
      },
      
      // 弹窗配置
      dialog: {
        title: '',
        content: '',
        confirmText: '确认',
        cancelText: '取消',
        action: null
      }
    };
  },
  onLoad() {
    // 页面加载时获取用户状态
    this.getUserStatus();
  },
  methods: {
	//我的钱包
	balance(){
		uni.navigateTo({
			url:'/pages/mine/balance'
		})
	},
    // 获取用户状态 (模拟)
    getUserStatus() {
      // 实际项目中可替换为接口调用
      uni.showLoading({ title: '加载中...' });
      setTimeout(() => {
        uni.hideLoading();
      }, 800);
    },
    
    // 切换在线状态
    handleOnlineStatusChange() {
      uni.showToast({
        title: this.isOnline ? '已开启接单' : '已关闭接单',
        icon: 'none',
        duration: 1500
      });
    },
    
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          // 更新本地头像
          this.userInfo.avatarUrl = tempFilePath;
        }
      });
    },
    
    // 显示退出确认
    showLogoutConfirm() {
      this.dialog = {
        title: '确认退出',
        content: '退出后需要重新登录才能继续使用',
        action: () => {
          // 执行退出登录
          uni.showLoading({ title: '退出中...' });
          setTimeout(() => {
            uni.hideLoading();
            // 清除登录状态，跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }, 1000);
        }
      };
      this.confirmPopup = true;
    },
    
    // 显示关于对话框
    showAboutDialog() {
      this.dialog = {
        title: '联系客服',
        content: '航拍任务平台 v1.2.0\n专注于提供优质的航拍任务对接服务',
        confirmText: '我知道了',
        action: () => {
          this.confirmPopup = false;
        }
      };
      this.confirmPopup = true;
    },
    
    // 关闭对话框
    closeDialog() {
      this.confirmPopup = false;
    },
    
    // 确认对话框操作
    confirmDialogAction() {
      if (typeof this.dialog.action === 'function') {
        this.dialog.action();
      }
      this.confirmPopup = false;
    },
    
    // 导航跳转方法
    gotoSettings() {
      uni.navigateTo({ url: '/pages/mine/settings' });
    },
    
    editUserInfo() {
      uni.navigateTo({ url: '/pages/user/edit-info' });
    },
    
    gotoRecharge() {
      uni.navigateTo({ url: '/pages/mine/recharge' });
    },
    
    gotoWithdraw() {
      if (this.userBalance.available <= 0) return;
      uni.navigateTo({ url: '/pages/mine/withdraw' });
    },
    
    gotoMemberCenter() {
      uni.navigateTo({ url: '/pages/mine/member' });
    },
    
    gotoMerchantEntry() {
      uni.navigateTo({ url: '/pages/mine/merchant-entry' });
    },
    
    gotoEnterpriseRecruit() {
      uni.navigateTo({ url: '/pages/mine/enterprise-recruit' });
    },
    
    gotoOrderList(type) {
      uni.navigateTo({ url: `/pages/order/list?type=${type}` });
    },
    
    gotoAcceptRecord() {
      uni.navigateTo({ url: '/pages/mine/accept-record' });
    },
    
    gotoAddressManage() {
      uni.navigateTo({ url: '/pages/mine/addresses' });
    },
    
    gotoLearningRecords() {
      uni.navigateTo({ url: '/pages/mine/learning' });
    },
    
    gotoCoupons() {
      uni.navigateTo({ url: '/pages/mine/coupons' });
    },
    
    contactCustomerService() {
      uni.navigateTo({ url: '/pages/mine/about' });
    },
    
    gotoFeedback() {
      uni.navigateTo({ url: '/pages/mine/feedback' });
    }
  }
};
</script>

<style scoped lang="scss">
// 主色调定义 - 采用沉稳的深蓝色系，营造大气感
$primary-color: #165DFF;
$primary-dark: #0E42D2;
$accent-color: #D4AF37; // 金色作为强调色
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$background: #F5F7FA;
$card-bg: #FFFFFF;
$border-color: #E5E6EB;

.user-center-page {
  background-color: $background;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-top: var(--status-bar-height);
}

// 自定义导航栏
.custom-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: $card-bg;
  border-bottom: 1px solid $border-color;
  
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-primary;
  }
  
  .nav-right {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .icon {
      font-size: 32rpx;
      color: $text-secondary;
    }
  }
}

// 个人信息头部
.user-header {
  position: relative;
  
  .header-bg {
    width: 100%;
    height: 480rpx;
    background-size: cover;
    background-position: center;
    position: relative;
    
    .bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0,0,30,0.2), rgba(0,0,50,0.6));
    }
  }
  
  .user-info-wrapper {
    display: flex;
    padding: 0 30rpx;
    margin-top: -290rpx;
    position: relative;
  }
  
  .avatar-section {
    position: relative;
    margin-right: 25rpx;
    
    .user-avatar {
      width: 180rpx;
      height: 180rpx;
      border-radius: 50%;
      border: 6rpx solid $card-bg;
      box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.2);
    }
    
    .user-level {
      position: absolute;
      bottom: 130rpx;
      right: 35rpx;
      padding: 5rpx 15rpx;
      border-radius: 20rpx;
      color: #fff;
      font-size: 22rpx;
      font-weight: 500;
      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
    }
  }
  
  .user-detail {
    flex: 1;
    padding-top: 10rpx;
	height: 360rpx;
    .user-name-row {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      
      .user-name {
        font-size: 36rpx;
        font-weight: 600;
        color: #fff;
        text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.4);
        margin-right: 15rpx;
      }
      
      .edit-icon {
        font-size: 26rpx;
        color: rgba(255,255,255,0.9);
        background-color: rgba(0,0,0,0.3);
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .user-id {
      font-size: 24rpx;
      color: rgba(255,255,255,0.9);
      margin-bottom: 25rpx;
    }
    
    .user-stats {
      display: flex;
      gap: 40rpx;
      
      .stat-item {
        text-align: center;
        
        .stat-value {
          font-size: 28rpx;
          font-weight: 600;
          color: #fff;
          text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
        }
        
        .stat-label {
          font-size: 22rpx;
          color: rgba(255,255,255,0.9);
        }
      }
    }
  }
  
  .online-status {
    // display: flex;
    // align-items: center;
    // padding: 15rpx 20rpx;
    // background-color: rgba(255, 34, 14, 0.2);
    border-radius: 30rpx;
    margin-top: 20rpx;
    
    .status-text {
      font-size: 26rpx;
      color: #fff;
      margin-right: 15rpx;
    }
  }
}

// 核心功能区
.core-functions {
  padding: 0 25rpx;
  margin-bottom: 30rpx;
  margin-top: -50rpx;
}

// 余额卡片
.balance-card {
  background-color: $card-bg;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 25rpx;
  box-shadow: 0 4rpx 4rpx 4rpx rgba(31, 31, 31, 0.1);
  
  .card-title {
    font-size: 30rpx;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 25rpx;
  }
  
  .balance-amount {
    display: flex;
    align-items: baseline;
    margin-bottom: 30rpx;
    
    .currency {
      font-size: 32rpx;
      color: $primary-dark;
      margin-right: 5rpx;
    }
    
    .amount {
      font-size: 50rpx;
      font-weight: 700;
      color: $primary-dark;
    }
    
    .frozen-amount {
      font-size: 24rpx;
      color: $text-tertiary;
      margin-left: 15rpx;
    }
  }
  
  .balance-actions {
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
      font-weight: 500;
    }
    
    .recharge-btn {
      background-color: #F0F5FF;
      color: $primary-color;
      border: 1px solid $primary-color;
    }
    
    .withdraw-btn {
      background-color: $primary-color;
      color: #fff;
      border: none;
      box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.25);
    }
    
    .withdraw-btn:disabled {
      background-color: #C9CDD4;
      color: #fff;
      box-shadow: none;
    }
  }
}

// 会员卡片 - 采用蓝金渐变，更显高端
.member-card {
  background: linear-gradient(135deg, $primary-dark, #0A2463);
  border-radius: 20rpx;
  padding: 25rpx 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  box-shadow: 0 6rpx 24rpx rgba(22, 93, 255, 0.2);
  
  .member-icon {
    font-size: 50rpx;
    color: $accent-color;
    margin-right: 20rpx;
    width: 60rpx;
    text-align: center;
  }
  
  .member-info {
    flex: 1;
    
    .member-title {
      font-size: 28rpx;
      font-weight: 500;
      color: #fff;
      margin-bottom: 8rpx;
      display: flex;
      align-items: center;
      
      .member-tag {
        font-size: 20rpx;
        background-color: $accent-color;
        color: #1D2129;
        padding: 2rpx 10rpx;
        border-radius: 10rpx;
        margin-left: 10rpx;
        font-weight: 500;
      }
    }
    
    .member-benefits {
      display: flex;
      gap: 20rpx;
      
      text {
        font-size: 22rpx;
        color: rgba(255,255,255,0.9);
        background-color: rgba(255,255,255,0.1);
        padding: 3rpx 15rpx;
        border-radius: 15rpx;
      }
    }
  }
  
  .arrow-icon {
    font-size: 32rpx;
    color: rgba(255,255,255,0.8);
  }
}

// 商业合作卡片
.business-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25rpx;
  
  .business-card {
    background-color: $card-bg;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
    transition: all 0.2s;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.04);
    }
    
    .card-icon {
      font-size: 45rpx;
      color: $primary-color;
      margin-right: 20rpx;
      width: 50rpx;
      text-align: center;
    }
    
    .card-content {
      flex: 1;
      
      .card-title {
        font-size: 28rpx;
        font-weight: 600;
        color: $text-primary;
        margin-bottom: 5rpx;
      }
      
      .card-desc {
        font-size: 22rpx;
        color: $text-tertiary;
        line-height: 1.4;
      }
    }
  }
}

// 订单中心
.order-center {
  background-color: $card-bg;
  border-radius: 20rpx;
  padding: 25rpx 30rpx;
  margin: 0 25rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 30rpx;
      font-weight: 600;
      color: $text-primary;
    }
    
    .section-more {
      font-size: 26rpx;
      color: $primary-color;
      display: flex;
      align-items: center;
      
      .arrow {
        font-size: 24rpx;
        margin-left: 5rpx;
      }
    }
  }
  
  .order-types {
    display: flex;
    justify-content: space-between;
    
    .order-type {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
      position: relative;
      
      .type-icon {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        background-color: #F0F5FF;
        color: $primary-color;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34rpx;
        margin-bottom: 12rpx;
      }
      
      .type-name {
        font-size: 24rpx;
        color: $text-secondary;
        text-align: center;
      }
      
      .type-badge {
        position: absolute;
        top: -5rpx;
        right: 20%;
        width: 34rpx;
        height: 34rpx;
        border-radius: 50%;
        background-color: $primary-color;
        color: #fff;
        font-size: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2rpx 8rpx rgba(22, 93, 255, 0.3);
      }
    }
  }
}

// 功能列表
.function-list {
  padding: 0 25rpx;
  margin-bottom: 120rpx;
  
  .function-group {
    background-color: $card-bg;
    border-radius: 20rpx;
    margin-bottom: 25rpx;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
    
    .function-item {
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      height: 100rpx;
      border-bottom: 1px solid $border-color;
      position: relative;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background-color: #F0F5FF;
      }
      
      .item-icon {
        font-size: 34rpx;
        color: $primary-color;
        margin-right: 25rpx;
        width: 40rpx;
        text-align: center;
      }
      
      .item-name {
        flex: 1;
        font-size: 28rpx;
        color: $text-primary;
      }
      
      .item-badge {
        position: absolute;
        right: 80rpx;
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        background-color: $primary-color;
        color: #fff;
        font-size: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .item-arrow {
        font-size: 30rpx;
        color: #C9CDD4;
      }
    }
  }
}

// 退出登录按钮
.logout-section {
  padding: 0 25rpx 40rpx;
  
  .logout-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #F0F5FF;
    color: $primary-color;
    border: 1px solid $primary-color;
    border-radius: 12rpx;
    font-size: 30rpx;
    font-weight: 500;
  }
}

// 确认对话框
.confirm-dialog {
  width: 560rpx;
  background-color: $card-bg;
  border-radius: 20rpx;
  padding: 35rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.15);
  
  .dialog-title {
    font-size: 32rpx;
    font-weight: 600;
    color: $text-primary;
    text-align: center;
    margin-bottom: 20rpx;
  }
  
  .dialog-content {
    font-size: 26rpx;
    color: $text-tertiary;
    text-align: center;
    margin-bottom: 35rpx;
    line-height: 1.6;
  }
  
  .dialog-buttons {
    display: flex;
    gap: 20rpx;
    
    .dialog-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 10rpx;
      font-size: 28rpx;
      font-weight: 500;
    }
    
    .cancel-btn {
      background-color: #F2F3F5;
      color: $text-secondary;
      border: none;
    }
    
    .confirm-btn {
      background-color: $primary-color;
      color: #fff;
      border: none;
    }
  }
}
</style>
    